<template>
	<div id="content">
		<div id="imfo">
			<div class="banner">
				<ul class="clearfix">
					<li>
						<img src="../assets/img/banner.png" alt="" />
					</li>
					<li>
						<img src="../assets/img/banner.png" alt="" />
					</li>
					<li>
						<img src="../assets/img/banner.png" alt="" />
					</li>
					<li>
						<img src="../assets/img/banner.png" alt="" />
					</li>
				</ul>
			</div>
			<div class="tabbable container" >
				<div class="row">
					<div class="col-md-8 col-xs-8" style="padding-bottom: 10px;">
						<ul class="pa_t nav nav-tabs row" style="border: none;">
							<router-link tag="li" active-class="active" to="/home">
								<div id="tab_t_sq" class="tab_t">
									<a href="javascript:;">最新动态</a>
								</div>
							</router-link>
							<router-link tag="li" active-class="active" to="/home_report">
								<div id="" class="tab_t">
									<a href="javascript:;">本地热点</a>
								</div>
							</router-link>
						</ul>
					</div>

					<div class="col-md-4 col-xs-4">
						<div id="" class="ckqb">
							<a href="javascript:;" style="color: #cecece">查看全部</a>
						</div>
					</div>
				</div>
				<ul class="news" style="padding-bottom: 50px;">
					<!-- 主体内容 -->
					<router-link 
					tag="li" class="list list-right-img" 
					:to="`/detail/${item._id}?collectionName=news_sh`" 
					v-for="(item,index) of news"
					:key="item._id">
						<div class="left">
							<div class="new">
								<p class="title list-ellipsis-1">{{item.title}}</p>
								<p class="content" v-html="item.main" style="margin-top: -10px;"></p>
							</div>
							<span class="time" style="padding-top: 2px;">{{item.fabushijian}}</span>
						</div>
						<div class="right">
							<img :src="require('../config').serverUrl + news[index].imgUrl" alt="">
						</div>
					</router-link>
				</ul>
			</div>
		</div>
	</div>
</template>

<script>
	import $ from 'jquery';
	import Swipe from '../assets/js/swipe.js';
	export default {
		name: 'home_report',
		props: {},
		data() {
			return {
				news: []
			};
		},
		components: {},
		mounted() {
			new Swipe($('.banner')[0], {
				auto: 1500,
				continuous: true,
				stopPropation: true,
				callback: function(index, element) {
					$('.banner ol li').removeClass('active');
					$('.banner ol li')
						.eq(index)
						.addClass('active');
				}
			});
			// axios 
			this.$axios.all([
				this.$axios.get('/api/list/news_sh'),
			]).then(
				this.$axios.spread((news) => { //所有数据回来，在渲染页面
					this.news = news.data;
					console.log(this.news)
				})
			)
		},
		updated() {},
		methods: {}
	};
</script>
<style scoped>
	
	a {
		text-decoration: none;
		color: #333;
	}
	
	.headlunbo {
		width: 100%;
	}
	
	.swiper-container {
		width: 100%;
		height: 100%;
		margin: auto;
	}
	
	.swiper-slide {
		text-align: center;
		font-size: 18px;
		background: #fff;
		display: -webkit-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		-webkit-justify-content: center;
		justify-content: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		-webkit-align-items: center;
		align-items: center;
	}
	img_b {
		width: 100%;
		height: 100%;
	}
	
	.tabbable {
		line-height: 1.2em;
		padding-top: 0em;
	}
	
	.tab_t {
		font-weight: 600;
		font-size: 1.2em;
		margin-top: 0.7em;
		margin-left: 1.2em;
		padding-bottom: 0.6em;
	}
	
	.pa_t {
		position: relative;
	}
	
	.pa_t>li {
		width: 7em;
	}
	
	.tab_t>a {
		color: #343434 !important;
		text-decoration: none;
	}
	
	.active {
		color: #43a1f8 !important;
	}
	
	.active::after {
		content: "";
		width: 20%;
		display: block;
		margin: 0 auto;
		border-bottom: 0.3em solid #007aff;
	}
	
	.active2::after {
		border-bottom: 0em solid #007aff;
	}
	.ckqb {
		width: 7em;
		height: 2em;
		background-color: #ffffff;
		border: 1px solid #cecece;
		color: #cecece;
		border-radius: 5em;
		font-size: 0.85em;
		text-align: center;
		line-height: 1.7em;
		margin: auto;
		margin-top: 0.8em;
	}
	/* banner */
	.content .banner {
		margin-top: 0.6rem;
		position: relative;
		overflow: hidden;
		z-index: 1;
	}
	
	.banner ul li {
		padding-top: 20px;
		width: 6.4rem;
		float: left;
		position: relative;
	}
	
	.banner ul li img {
		width: 100%;
		display: block;
	}
	
	.banner ul li .text-box {
		width: 5.8rem;
		/* padding: 0 0.3rem; */
		height: 1.24rem;
		position: absolute;
		left: 0;
		bottom: 0;
		color: #fff;
		background: rgba(0, 0, 0, 0.5);
	}
	
	/* news 列表 */
	.news {
		margin-left: -10px;
		/* background: #fff; */
	}
	
	.news .list {
		width: 100%;
		/* background: pink; */
		display: flex;
		display: -webkit-flex;
		/* padding: 5px 5px 5px; */
		margin: 0px 5px;
				border-bottom: 1px #ddd dashed;
		/* border-bottom: 1px solid #ddd; */
	}
	
	.news .list:last-child {
		border: 0;
	}
	.list{
	padding: 8px 0px;
		}
	
	
	
	
	
	/* 右图模式 */
	.list-right-img .left {
		width: 60%;
		display: flex;
		display: -webkit-flex;
		flex-direction: column;
		justify-content: space-between;
	}
	
	.list-right-img .left .title {
		font-weight: bold;
		height: 20px;
		font-size: 14px;
		/* background: #007AFF; */
	}
	
	.list-right-img .left .content {
		font-size: 13px;
		/* line-height: 12px; */
		height: 50px;
		color: #888;
		margin: 2px 0;
		/* background: deeppink; */
		/* color: #007AFF; */
		display: -webkit-box;
		text-overflow: ellipsis;
		overflow: hidden;
		-webkit-text-overflow: ellipsis;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		word-break: break-all;
	}
	
	.list-right-img .left .time {
		font-size: 12px;
		color: #bbb;
	}
	
	.list-right-img .right {
		padding-top: 5px;
		width: 40%;
		height: 80px;
		margin-left: 10px;
	}
	
	.list-right-img .right img {
		width: 100%;
		height: 100%;
		border-radius: 5px;
		/* height: 80px; */
	}
	
	
	
	/* 单行省略 */
	.list-ellipsis-1 {
		/* padding: 1px; */
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	
	/* 两行省略 */
	.list-ellipsis-2 {
		display: -webkit-box;
		overflow: hidden;
		text-overflow: ellipsis;
		word-wrap: break-word;
		word-break: break-all;
		white-space: normal !important;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	
</style>
